// import App from '../App'
// import Home from '@/views/Home'
// import About from '@/views/About'
// import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
// // 两种路由模式的组件: BrowserRouter(History模式)
// // HashRouter(hash模式)

//  const baseRouter = () => {
//     return(
//         <BrowserRouter>
//         <Routes>
//             <Route path='/' element={<App />} >
//             {/* {配置路由重定向} */}
//             <Route path='/' element={<Navigate to='/home'/>}></Route>
//             <Route path="/home" element={<Home/>}></Route>
//             <Route path="/about" element={<About/>}></Route>
//             </Route>
//         </Routes>
//     </BrowserRouter>
//     )

// }
// export default baseRouter
import React,{lazy} from 'react'
import { Navigate } from 'react-router-dom'
import Home from '../views/Home'

const About =lazy(()=>import('../views/About'))
const User =lazy(()=>import('../views/User'))
const Page1 =lazy(()=>import('../views/Page1'))
const Page2 =lazy(()=>import('../views/Page2'))

const withLoadingComponent=(comp:JSX.Element)=>(
    <React.Suspense fallback={<div>Loading...</div>}>
    {comp}
    </React.Suspense>
)
const routes=[
    {
        path:"/",
        element:<Navigate to="/page1"/>
    },
    {
        path:"/",
        element:<Home/>,
        children:[
            {
            path:"/page1",
            element:withLoadingComponent(<Page1/>) 
            },
            {
                path:"/page2",
                element:withLoadingComponent(<Page2/>) 
            }
        ]
    }
    // {
    //     path:"/about",
    //     element:withLoadingComponent(<About/>)
    // },
    // {
    //     path:"/user",
    //     element:withLoadingComponent(<User/>)
    // },
    // {
    //     path:"/page1",
    //     element:withLoadingComponent(<Page1/>)
    // },
    // {
    //     path:"/page2",
    //     element:withLoadingComponent(<Page2/>)
    // },

]
export default routes